<template>
  <div class="app-container">
    <div class="top">
      <el-button
        type="primary"
        class="el-icon-plus add"
        size="mini"
        @click="addOrEdit('add')"
        >新增</el-button
      >
      <el-form ref="form" :model="form" label-width="80px" inline size="mini">
        <el-form-item>
          <el-input v-model="form.name" placeholder="请输入猪舍名字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.buildingsType">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in allTypeList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加对话框  :before-close="handleClose" -->
    <el-dialog :title="desc" :visible.sync="dialogVisible" width="700px">
      <el-form
        :model="builForm"
        inline
        size="mini"
        label-width="90px"
        :rules="rules"
        ref="ruleForm"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="猪舍名称" prop="name">
              <el-input v-model="builForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="猪舍类型" prop="buildingsType">
              <el-select
                v-model="builForm.buildingsType"
                placeholder="请选择活动区域"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in typeList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大存栏数" prop="columnMaxNumber">
              <el-input v-model="builForm.columnMaxNumber">
                <!-- <template slot="append">头</template> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="栏总数"
              prop="sumColumnNumber"
              v-show="desc === '添加猪舍'"
            >
              <el-input v-model="builForm.sumColumnNumber"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableList" style="width: 100%" border>
      <el-table-column prop="name" label="猪舍名称" align="center">
      </el-table-column>
      <el-table-column prop="buildingsType" label="猪舍类型" align="center">
      </el-table-column>
      <el-table-column prop="columnMaxNumber" label="最大存栏数" align="center">
      </el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="columnNumber(row.id)"
            >栏号</el-button
          >
          <el-button type="text" size="small" @click="addOrEdit('edit', row)"
            >编辑</el-button
          >
          <el-popconfirm
            @onConfirm="deleteBtn(row)"
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除吗？"
            style="margin-left: 10px"
          >
            <el-button type="text" size="small" slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>

      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableList.length === 0">
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <el-dialog title="猪舍栏号" :visible.sync="dialogNumber" width="20%">
      <el-dialog
        width="15%"
        title="添加栏号"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div>
          栏号：<el-input

            size="mini"
            label="栏号"
            style="width: 100px"
            v-model="addColumnNumber"
          ></el-input>
        </div>

        <div slot="footer" class="dialog-footer">
          <!-- <el-button @click="outerVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="innerVisibleConfirm" size="mini"
            >确定</el-button
          >
        </div>
      </el-dialog>
      <el-table
        :data="numberList"
        border
        style="width: 100%; height: 400px; overflow: auto"
      >
        <el-table-column prop="name" label="栏号" align="center">
          <template slot-scope="{ row }">
            <el-input
             style="width: 100px"
              v-model="row.name"
              size="mini"
              @input="numberInput"
              @blur="blurInput(row)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="deletNumber(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="addBtn">
        <el-button
          type="primary"
          class="el-icon-plus add"
          size="mini"
          @click="addBtn"
          >新增</el-button
        >
      </div>
    </el-dialog>
    <Pagination :total="total" @pagination="handleSizeChange" :page.sync="builForm.pageNum"></Pagination>
  </div>
</template>

<script>
import {
  getlist,
  saveAndUpdate,
  buildingsDelete,
  buildings,
  getColumnByBuildingsId,
  deleteNumber,
  saveAndUpdateNumber,
} from "@/api/system-setup/building";
import cloneDeep from "lodash/cloneDeep";
import { typeList, allTypeList } from "./constant";
export default {
  data() {
    const columnMaxNumber = (rule, value, callback) => {
      if (value < 0 || value === 0) {
        callback(new Error("最大存栏数不能小于0"));
      } else if (value > 1000) {
        callback(new Error("最大存栏数不能大于1000"));
      } else {
        callback();
      }
    };
    const sumColumnNumber = (rule, value, callback) => {
      if (value < 0 || value === 0) {
        callback(new Error("栏总数不能小于0"));
      } else if (value > 1000) {
        callback(new Error("栏总数不能大于1000"));
      } else {
        callback();
      }
    };
    return {
      show: true,
      desc: "",
      total: 0,
      innerVisible: false,
      dialogNumber: false,
      dialogVisible: false,
      builForm: {
        buildingsType: "",
        columnMaxNumber: 0,
        sumColumnNumber: 0,
        createTime: "",
        id: 0,
        name: "",
        pageNum: 0,
        pageSize: 10,
        remark: "",
        updateTime: "",
      },
      form: {
        name: "",
        buildingsType: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入猪舍名", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        buildingsType: [
          { required: true, message: "请选择猪舍类型", trigger: "change" },
        ],
        columnMaxNumber: [{ validator: columnMaxNumber, trigger: "blur" }],
        sumColumnNumber: [{ validator: sumColumnNumber, trigger: "blur" }],
      },
      tableList: [],
      allTypeList,
      typeList,
      numberList: [],
      numberId: null,
      number: "",
      addColumnNumber: "",
    };
  },
  created() {
    this.searchList();
  },
  methods: {
    handleSizeChange(val) {
      this.builForm.pageNum = val.page;
      this.builForm.pageSize = val.limit;
      this.searchList();
    },
    async searchList() {
      let res = await getlist(this.builForm);
      if (res.code == 200) {
        this.total = res.buildingsList.total;
        let list = res.buildingsList.records;
        list.forEach((item1) => {
          this.typeList.forEach((item2) => {
            if (item1.buildingsType == item2.id) {
              item1.buildingsType = item2.name;
              return;
            }
          });
        });
        this.tableList = list;
      }
    },
    async saveAndUpdate() {
      let res = await saveAndUpdate(this.builForm);
      if (res.code === 200) {
        this.builForm = {
          buildingsType: "",
          columnMaxNumber: 0,
          sumColumnNumber: 0,
          createTime: "",
          id: 0,
          name: "",
          pageNum: 0,
          pageSize: 10,
          remark: "",
          updateTime: "",
        };
      }
    },
    search() {
      if (this.form.buildingsType == "0") {
        this.builForm.buildingsType = "";
      } else {
        Object.assign(this.builForm, this.form);
      }
      this.builForm.pageNum = 1
      this.searchList();
    },
    addOrEdit(type, row) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
      if (type === "add") {
        this.desc = "添加猪舍";
        this.builForm.buildingsType = "";
        this.builForm.columnMaxNumber = 0;
        this.builForm.sumColumnNumber = 0;
        this.builForm.name = "";
      } else {
        this.desc = "修改猪舍";
        console.log(row);
        this.builForm = cloneDeep(row);
      }
    },
    async deleteBtn(row) {
      let res = await buildingsDelete([row.id]);
      if (res.code == 200) {
        this.tableList.length > 1
          ? this.builForm.pageNum
          : this.builForm.pageNum--;
        //this.msgSuccess("删除成功");
        this.searchList();
      }
    },
    close() {
      this.dialogVisible = false;
    },
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.saveAndUpdate().then(() => {
            this.dialogVisible = false;
            this.searchList();
          });
        } else {
          return false;
        }
      });
    },
    async columnNumber(id) {
      this.dialogNumber = true;
      this.numberId = id;
      let res = await getColumnByBuildingsId(id);
      if (res.code == 200) {
        this.numberList = res.data;
      }
    },
    async deletNumber(id) {
      let res = await deleteNumber([id]);
      if (res.code == 200) {
        this.columnNumber(this.numberId);
      }
    },
    addBtn() {
      this.innerVisible = true;
      this.addColumnNumber = "";
    },

    numberInput(value) {
      this.number = value;
    },
    async blurInput(row) {
      if (this.number) {
        // console.log(row);
        let res = await saveAndUpdateNumber(row);
        if (res.code == 200) {
          this.columnNumber(this.numberId);
          this.number = "";
        }
      }
    },
    async innerVisibleConfirm() {
      if (this.addColumnNumber) {
        let res = await saveAndUpdateNumber({
          buildingsId: this.numberId,
          createTime: "",
          id: 0,
          name: this.addColumnNumber,
          pageNum: 0,
          pageSize: 0,
          remark: "",
          updateTime: "",
        });
        if (res.code == 200) {
          this.innerVisible = false;
          this.columnNumber(this.numberId);
        }
      }
    },
  },
};
</script>

<style>
.addBtn {
  display: flex;
  height: 40px;
  justify-content: flex-end;
  flex-flow: wrap;
  align-content: end;
}
</style>
